<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="lib/layui-v2.5.5/css/layui.css">
    <title>项目合同分析</title>
    <link rel="stylesheet" href="lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
    <link rel="stylesheet" href="css/public.css" media="all">
    <link rel="stylesheet" href="css/card.css">
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-body">
                        <form class="layui-form">
                            <div class="layui-inline">
                                <label class="layui-form-label">开始月份</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="startTime" id="=startTime" class="layui-input datetime"
                                           placeholder="(包含此月)" required lay-verify="required">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">终止月份</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="endTime" id="endTime" class="layui-input datetime"
                                           placeholder="(不包含此月)" required lay-verify="required">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <a class="layui-btn layui-btn-primary" lay-submit lay-filter="data-search-btn"><i
                                        class="layui-icon">&#xe666;</i> 重载数据</a>
                            </div>
                            <label class=" layui-text">(初始数据默认一年内,不包括当前所在月份)</label>
                        </form>
                    </div>
                    <div class="layui-card-body">
                        <div class="layui-row layui-col-space15">
                            <div class="layui-col-md8">
                                <div class="layui-col-md12">
                                    <div class="layui-card">
                                        <div class="layui-card-header">
                                            <i class="fa fa-bar-chart icon"></i>合同金额直方图
                                        </div>
                                        <div class="layui-card-body">
                                            <div style="width: 100%;min-height: 300px" id="main"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-col-md4 ">
                                <div class="layui-row">
                                    <div class="layui-col-xs6">
                                        <div class="layui-card">
                                            <div class="layui-card-header"><i
                                                    class="fa fa-bullhorn icon icon-tip"></i>单次金额最大的客户
                                            </div>
                                            <div class="layui-card-body layui-text">
                                                <br/>
                                                <h3 id="oneRichCust">某某有限公司</h3><br/>
                                            </div>
                                        </div>
                                        <div class="layui-card">
                                            <div class="layui-card-header"><i
                                                    class="fa fa-bullhorn icon icon-tip"></i>合作客户数
                                            </div>
                                            <div class="layui-card-body layui-text">
                                                <br/>
                                                <h1 id="num">0</h1>
                                                <br/>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="layui-col-xs6">
                                        <div class="layui-card">
                                            <div class="layui-card-header"><i
                                                    class="fa fa-bullhorn icon icon-tip"></i>合作数量最多的客户
                                            </div>
                                            <div class="layui-card-body layui-text">
                                                <br/>
                                                <h3 id="mostNumCust">某某有限公司</h3>
                                                <br/>
                                            </div>
                                        </div>
                                        <div class="layui-card">
                                            <div class="layui-card-header"><i
                                                    class="fa fa-bullhorn icon icon-tip"></i>累计金额最大的客户
                                            </div>
                                            <div class="layui-card-body layui-text">
                                                <br/>
                                                <h3 id="sumRichCust">某某有限公司</h3><br/>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script src="js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script>
    layui.use(['form', 'layer', 'laydate','echarts'], function () {
        var $ = layui.jquery,
            form = layui.form,
            layer = layui.layer,
            echarts = layui.echarts,
            laydate = layui.laydate;

        $('.datetime').each(function () {
            laydate.render({
                elem: this       //使用this指向当前元素,不能使用class名, 否则只有第一个有效
                , type: 'month'
            });
        });
        var xAxisData = [];
        var contractData = [];
        getData();
        form.on("submit(data-search-btn)",function (obj) {
            getData(obj);
        });
        function getData(data) {
            if (data != null) data = data.field;
            $.ajax({
                type: "post",
                data: data,
                url: "contract/getAllSingleData",
                success: function (result) {
                    //console.log(result.mostNumCust);
                    $("#num").html(result.num);
                    $("#oneRichCust").html(result.oneRichCust);
                    $("#mostNumCust").html(result.mostNumCust);
                    $("#sumRichCust").html(result.sumRichCust);
                     if(result.num==undefined){
                        $("#num").html("无");
                        $("#oneRichCust").html("无");
                        $("#mostNumCust").html("无");
                        $("#sumRichCust").html("无");
                    }
                }
            });
            $.ajax({
                type: "post",
                data: data,
                url: "contract/getContractBar",
                success: function (result) {
                    var contractBar = result.contractBar;
                    contractData.length = 0;
                    xAxisData.length = 0;
                    for(var i in contractBar){
                        xAxisData.push(i);
                        contractData.push(contractBar[i])
                    }
                    myChart.setOption({
                        xAxis: {
                            data: xAxisData
                        },
                        series: [{
                            // 根据名字对应到相应的系列
                            name: '合同金额',
                            data: contractData
                        }
                        ]
                    });
                }
            })
        }

        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '合同金额'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            legend: {
                data: [ '合同金额']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                //boundaryGap: false,
                //data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                data:["2019-04","2019-05","2019-06","2019-07","2019-08","2019-09","2019-10","2019-11","2019-12","2020-01","2020-02","2020-03"],
                //data:xAxisData
                axisTick: {
                    alignWithLabel: true
                }
                /*axisPointer: {
                    type: 'shadow'
                }*/
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: '合同金额',
                    type: 'bar',
                    //stack: '总量',
                    data: [0,100,0,100,0,230,150,110,130,50]
                    //data:decreaseData
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    })

</script>

</body>
</html>
